import {
	arrayToObject
} from '../../../../assets/js/util.js'
export default {
	data() {
		return {
			loading: false,
			// 默认参数 和 URL
			SRC: '',
			DP: {
				p: '',
				f: ''
			},
			title: '邮件查询流水',
			xlsxTitle:'',
			// 设置时间 一周， 一月，  昨天
			pickerOptions: {
				shortcuts: [{
					text: '最近一周',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '最近一个月',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '最近三个月',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
						picker.$emit('pick', [start, end]);
					}
				}]
			},
			// 存放获取到的平台数
			plats: [],
			// 存放获取到的渠道数
			channels: [],
			// 存放获取到的区服数
			serviceAreas: [],
			// 提交的表单
			form: {
				dateOne: '',
				dateStart: '',
				dateEnd: '',
				serviceArea: '0',
				auID: '',
				roleId: ''
			},
			// 表单验证
			rules: {
				serviceArea: [{
					required: true,
					message: '请选择区服',
					trigger: 'change'
				}],
				auID: [{
					required: true,
					message: '请输入公会ID',
					trigger: 'blur'
				}, {
					min: 3,
					max: 50,
					message: '长度在 3 到 50 个字符',
					trigger: 'blur'
				}],
				roleId: [{
					required: true,
					message: '请输入角色ID',
					trigger: 'blur'
				}, {
					min: 3,
					max: 50,
					message: '长度在 3 到 50 个字符',
					trigger: 'blur'
				}]
			},
			// 工会ID输入框的宽
			inputWidth: '100px',
			// 所有el-form-item label的宽度
			formLabelWidth: '100px',
			/*表格数据*/
			tableData: [],
			/*realTimeServiceContent 的宽*/
			realTimeServiceContent: '100%',
			/*表的宽度*/
			realTimeServiceTableWidth: "100%",
			/*数据表头*/
			tableHeader: [{
					prop: 'innerId',
					label: '时间',
					width: "100px"
				}, {
					prop: 'plat',
					label: '区服',
					width: "100px"
				}, {
					prop: 'channel',
					label: '账号ID',
					width: "100px"
				}, {
					prop: 'serviceArea',
					label: '角色ID',
					width: "100px"
				}, {
					prop: 'accountId',
					label: '附件物品ID',
					width: "120px"
				}, {
					prop: 'roleId',
					label: '附件物品数量',
					width: "130px"
				}, {
					prop: 'roleGrade1',
					label: '邮件类型',
					width: "100px"
				}, {
					prop: 'roleGrade2',
					label: '邮件标识',
					width: "100px"
				}, {
					prop: 'roleGrade3',
					label: '邮件标题',
					width: "100px"
				}, {
					prop: 'roleGrade4',
					label: '附件金币数量',
					width: "130px"
				}, {
					prop: 'roleGrade5',
					label: '掩码',
					width: "100px"
				}, {
					prop: 'roleGrade6',
					label: '入包原因',
					width: "130px"
				}, {
					prop: 'roleGrade7',
					label: '发送角色标识',
					width: "200px"
				}, {
					prop: 'roleGrade8',
					label: '操作类型',
					width: "200px"
				}]
		}
	},
	computed: {
		// xlsx() {
		// 	return this.title + '.xlsx'
		// }
	},
	methods: {
		// 通用 成功 与 失败
		successFun(data) {
			this.$message({
				message: data,
				type: 'success'
			});
		},
		errorFun(data) {
			this.$message.error(data);
		},
		// 时间改变 得到起始时间和结束时间
		dateChange(val) {
			var t = val.split(' - ')
			this.form.dateStart = t[0];
			this.form.dateEnd = t[1];
		},
		// 提交数据
		commitData() {
			var that = this;
			var p = new Promise(function(resolve, reject) {
				var obj = {
					"dateStart": that.form.dateStart,
					"dateEnd": that.form.dateEnd,
					"userid": that.form.auID,
					"roleid": that.form.roleId,
					"serverid": that.form.serviceArea
				}
				that.loading = true;
				that.tableData = [];
				obj = encodeURI(JSON.stringify(obj));
				that.$http.jsonp(`${that.SRC}data/get.do?p=${that.DP.p}&f=${that.DP.f}&a=search`,{
					params:{'ps':'params='+obj},
				}).then(function(res) {
					resolve(res.body)
				})
			})
			p.then(function(value) {
				that.loading = false;
				var data = JSON.parse(JSON.parse(value));
				if (parseInt(data["res"]) === 0) {
					if (data.data.length === 0) {
						that.errorFun("该角色暂无数据！")
					} else {
						that.tableData = arrayToObject(that.tableHeader, data.data);
					}
				} else {
					that.errorFun("数据失败！")
				}
			})
		},
		// 搜索
		search(form) {
			this.$refs[form].validate((valid) => {
				if (valid) {
					this.commitData()
				} else {
					this.errorFun('请完善输入的值！');
					return false;
				}
			});
		},
		//重置
		reset(form) {
			this.$refs[form].resetFields();
		},
		/*获取区服列表数据*/
		getData: function() {
			var that = this;
			// 将数据push到选择框中
			var pushData = function(pushArr, attr, data) {
				for (var i in data[attr]) {
					that[pushArr].push({
						label: i,
						value: data[attr][i]
					})
				}
			};
			var p = new Promise(function(resolve, reject) {
				that.$http.jsonp(`${that.SRC}data/get.do?p=${that.DP.p}&f=${that.DP.f}&a=initParam`,{
				params:{'ps': '' }
				}).then(function(res) {
					resolve(res.body)
				})
			});
			p.then(function(value) {
				var data = JSON.parse(JSON.parse(value));
				if (parseInt(data["res"]) === 0) {
					pushData("plats", "platformItmes", data);
					pushData("channels", "channelItmes", data);
					pushData("serviceAreas", "serverItmes", data);
				} else {
					this.getErrorMsg(Number(data.res))
				}
			})
		},
		/*设置初始值*/
		_init() {
			window.addEventListener('resize', function() {
				/*修改表格的宽度*/
				this.realTimeServiceTableWidth = document.body.clientWidth - 240 + "px";
				this.realTimeServiceContent = document.body.clientWidth - 220 + "px";
			}.bind(this))
		},
		// 表格下载
		excel(val) {
			this.xlsxTitle = val+"-"+this.form.dateStart+"到"+this.form.dateEnd;
			this.downloadExl(this.tableHeader, this.tableData,this.xlsxTitle, this.title);
			
		}
	},
	mounted() {
		this._init()
		// 初始化URL
		this.SRC = this.$store.getters.src;
		this.DP.p = localStorage.getItem('ZULONGBIPROJECTID');
		this.DP.f = localStorage.getItem('ZULONGBIPAGEID');
		this.form.dateOne = [new Date(new Date().getTime() - 86400000),new Date()];
		this.getData();
	}
}